<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="1150px"
      height="800px"
      :modal="false"
      custom-class="gsjcLayer"
      @close="closeDialog"
    >
      <div class="content">
        <el-row>
          <el-col :span="6" class="attributeStyle">商户名称</el-col>
          <el-col :span="6">{{ merchant.shmc }}</el-col>
          <el-col :span="6" class="attributeStyle">社会信用代码</el-col>
          <el-col :span="6">{{ merchant.tyshxydm }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="attributeStyle">商户地址</el-col>
          <el-col :span="6">{{ merchant.shdz }}</el-col>
          <el-col :span="6" class="attributeStyle">经营者</el-col>
          <el-col :span="6">{{ merchant.jyz }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="attributeStyle">联系电话</el-col>
          <el-col :span="6">{{ merchant.jyzdh }}</el-col>
          <el-col :span="6" class="attributeStyle">经营范围</el-col>
          <el-col :span="6">{{ merchant.yyzzjyfw }}</el-col>
        </el-row>
      </div>
      <div class="wordCloud" v-if="wordCloudShow">
        <vue-wordcloud
          style="width: 100%; height: 100%; background: transparent"
          :options="options"
        />
      </div>
      <el-table :data="tableData" style="width: 90%" height="300px">
        <el-table-column prop="jcrq" label="检查日期"></el-table-column>
        <el-table-column prop="jczd" label="检查重点"></el-table-column>
        <el-table-column
          prop="jcqk"
          label="检查情况"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column prop="fxdj" label="风险等级"></el-table-column>
        <el-table-column prop="yqzgsj" label="要求整改时间"></el-table-column>
        <el-table-column prop="zgjgecsr" label="整改结果"></el-table-column>
        <el-table-column
          prop="jcry"
          label="检察人员"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column prop="cz" label="操作" class="txjcbutton">
          <template slot-scope="scope">
            <el-button v-if="scope.row.jcrq != null" size="mini" @click="handleEdit(scope.$index, scope.row)"
              >提醒检查</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  selectShxxByGridId,
  selectGridForShangHu,
  getgpcbycontent,
} from "../../utils/api";
export default {
  name: "gsjcLayer",
  data() {
    return {
      dialogVisible: false,
      wordCloudShow: false,
      title: "巡查走访",
      merchant: {},
      tableData: [],
      options: {
        list: [],
        color: ["#9FE6B8","#32C5E9","#FFDB5C","#FF9F7F","#FB7293","#E7BCF3","#8378EA"],
        tooltip: {
          show: false,
        },
        backgroundColor: "transparent",
        rotationRation: 0,
        gridSize: 35,
        minFontSize: 14,
        maxFontSize: 30,
      },
    };
  },
  mounted() {
    window.gsjcLayerInit = this.getData;
  },
  methods: {
    getData(id) {
      let that = this;
      this.dialogVisible = true;
      selectGridForShangHu(id).then((res) => {
        if (res.data.code === 200) {
          this.merchant = res.data.data;
          this.tableData = res.data.data.gsjc;
          var Str = "";
          for (var i = 0; i < this.tableData.length; i++) {
            Str += this.tableData[i].jczd;
            Str += this.tableData[i].jcqk;
          }
          getgpcbycontent("content=" + Str + "&length=2").then((res) => {
            if (res.data.result.nullnull == 1) {
              return;
            }
            var tem = res.data.result;
            var temList = [];
            for (var key in tem) {
              var temarr = [];
              temarr.push(key);
              temarr.push(tem[key]);
              temList.push(temarr);
            }
            that.wordCloudShow = true;
            that.options.list = temList;
          });
        }
      });
    },
    handleEdit() {
      this.$message({
        message: "提醒成功",
        type: "success",
      });
    },
    closeDialog() {
      this.wordCloudShow = false;
      this.options.list = [];
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-button {
  background: #009688 !important;
  border: 1px solid #009688 !important;
  color: #fff !important;
}
.el-dialog__wrapper {
  width: 3096px;
  overflow: unset !important;
}
.el-table {
  background: unset;
  margin-top: 5px;
  margin: auto;
}

.attributeStyle {
  color: #7bf8ce;
}

.content {
  color: white;
  width: 100%;
  margin: 0 50px;
}
.wordCloud {
  width: 95%;
  margin: auto;
  height: 240px;
}
</style>